<template>
    <div class="login">
        <div class="login-image">
            <el-image :src="background" fit="fill"></el-image>
        </div>
        <div style="position: absolute;top: 10px;right: 20px;">
            <el-button type="text" class="el-icon-s-shop" @click="linkTo('factory')">供应商登陆</el-button>
            <el-button type="text" class="el-icon-s-custom" @click="linkTo('visitor')">访客登陆</el-button>
        </div>
        <div class="login-model">
            <div>扫码登陆</div>
            <div style="font-size: 16px;color:#5e638f;">请使用手机飞书扫描二维码</div>
            <div id="login_container">
                <el-image v-if="onLoading || !redirectUri" :src="qrcode" fit="fill"></el-image>
            </div>
            <el-select v-model="orgCode" placeholder="选择飞书" style="width: 230px;" @change="orgChangeBtn" :disabled="!!tab">
                <el-option v-for="(item,index) in orgs" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <br>
            <div v-if="fastUser.name" style="display:inline-block;font-size: 14px;width: 200px;">
                <span style="color: #909399">检测到您的授权账号：<span style="color: #e6a23c">{{fastUser.name_en}}</span>，直接点击
                    <el-button type="primary" size="mini" :loading="fastLoginLoading" @click="handleSubmit">授权登陆</el-button>
                </span>
            </div>
        </div>
    </div>
</template>

<script>

import background from "@/assets/images/login.png"
import qrcode from "@/assets/images/qrcode.png"
import {redirectUri} from "@/api/user";
import {localRead} from "@/libs/util";
import {decrypt} from "../../../libs/tools";

export default {
    name: "fsLoginForm",
    props: {
        source: "",
        tab: "",
    },
    data() {
        return {
            background,
            qrcode,
            redirectUri: "",
            onLoading: false,
            orgCode: "cli_a2984ab27e22500e",
            orgs: [
                {
                    tab: "kz",
                    value: "cli_a2984ab27e22500e",
                    label: "年年有余 (浙江)文化科技有限公司",
                },
                {
                    tab: "mz",
                    value: "cli_a4e85e1fd738900b",
                    label: "杭州妙哉文化有限公司",
                },
                {
                    tab: "yx",
                    value: "cli_a417a82b037e900e",
                    label: "杭州著风和雨文化科技有限公司",
                },
                {
                    tab: "xm",
                    value: "cli_a694f6fb157b500e",
                    label: "杭州亦亦上弦文化科技有限公司",
                },
                {
                    tab: "js",
                    value: "cli_a61a3f5797e9100d",
                    label: "庄周梦蝶（杭州）文化有限公司",
                },
                // {
                //     tab: "qyx",
                //     value: "cli_a752717ac57d900b",
                //     label: "杭州汉夕互联网科技有限公司",
                // }
            ],
            fastUser: {},
            fastLoginLoading: false,
        };
    },
    created(){

    },
    async mounted() {
        //获取是否开启了快捷登陆模式
        let fastUser = localRead("user-fast-login-info");
        if(fastUser){
            this.fastUser = JSON.parse(fastUser);
            let name = this.fastUser.name.split("");
            name.length > 2 ? name.splice(1, 1, " * ") : name.splice(1, 0, " * ");
            name = name.join("");
            this.fastUser.name_en = name;
        }
        //同步获取飞书扫码跳转地址
        this.redirectUri = await redirectUri().then(res => res.data);
        this.scanInit();
    },
    methods: {
        //初始化二维码登陆
        scanInit(){
            this.onLoading = this.$route.query.on == "loading";
            let tab = !!this.tab ? this.tab : "kz";
            for(let item of this.orgs){
                if(tab == item.tab && !this.onLoading){
                    this.orgCode = item.value;
                    this.QRCode({ appid: item.value, is_subject: tab});
                }
            }
        },
        linkTo(type){
            window.location.href = "/#/login?on="+type;
            window.location.reload();
        },
        orgChangeBtn() {
            document.getElementById("login_container").innerHTML = "";
            for(let item of this.orgs){
                if(item.value == this.orgCode){
                    this.QRCode({ appid: item.value, is_subject: item.tab});
                }
            }
        },
        QRCode(obj) {
            let redirect_uri = this.redirectUri;
            var QRLoginObj = QRLogin({
                id: "login_container",
                goto: `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${obj.appid}&redirect_uri=${redirect_uri}&response_type=code&state=${obj.is_subject}`,
                width: "265",
                height: "265",
                style: "border:none"
            });
            var handleMessage = function (event) {
                console.log("event", event);
                var origin = event.origin;
                // 使用 matchOrigin 方法来判断 message 来自页面的url是否合法
                if (QRLoginObj.matchOrigin(origin)) {
                    var loginTmpCode = event.data;
                    // 在授权页面地址上拼接上参数 tmp_code，并跳转
                    window.location.href = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${obj.appid}&redirect_uri=${redirect_uri}&response_type=code&state=${obj.is_subject}&tmp_code=${loginTmpCode}`;
                }
            };
            if (typeof window.addEventListener != "undefined") {
                window.addEventListener("message", handleMessage, false);
            } else if (typeof window.attachEvent != "undefined") {
                window.attachEvent("onmessage", handleMessage);
            }
        },
        handleSubmit () {
            this.fastLoginLoading = true;
            this.$emit('on-login', {
                username: this.fastUser.name,
                password: decrypt(this.fastUser.phone),
                source_from: this.fastUser.source_from
            });
        }
    },
};
</script>
<style scoped>
    .login {
        width: 100%;
        height: 100vh;
        background: #000c17;
        background-image: linear-gradient(to right bottom, #000c17, #041629);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 500px;
    }
    .login-image {
        width: 50%;
    }
    .login-model {
        font-size: 20px;
        /*font-weight: 800;*/
        text-align: center;
        color: white;
        border-radius: 4px;
        /*background-color: #ffffff;*/
        box-shadow: 8px 8px 20px 1px #ebeef5;
        margin-left: 4%;
        padding: 4% 2%;
    }
    .login-model div{
        padding-top: 5%;
    }
</style>
